﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SampleWeb._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>Sample page</title>

	<script type="text/javascript" src="Scripts/prototype/prototype.js"></script>

	<script type="text/javascript" src="Scripts/scriptaculous/scriptaculous.js"></script>

	<script type="text/javascript">
		
		
		Array.prototype.shuffle = function() {
			return this.sortBy(Math.random);
		};

		function foo() {
			$('scripty_morph_demo').select('div').shuffle().each(function(e, i) {
				e.morph('top:' + i*e.getHeight() + 'px', { duration: 0.5 }); 
			});
		}

		function init()
		{
			$('scripty_morph_demo').observe('click', foo);
		}


	</script>

</head>
<body onload="init()">
	<form id="form1" runat="server">
	<div>
		<h1>
			Possan.ZipFolders Example
		</h1>
		<p>
			a simple script.aculo.us sample with javascript provided from zipfile
		</p>
		<style>
			#scripty_morph_demo
			{
				cursor: pointer;
				position: relative;
				height: 300px;
			}
			#scripty_morph_demo div
			{
				position: absolute;
				font-size: 60px;
				height: 60px;
			}
		</style>
		<div id="scripty_morph_demo">
			<div style="top: 240px;">
				1. Lorem</div>
			<div style="top: 120px;">
				2. ipsum</div>
			<div style="top: 180px;">
				3. dolor</div>
			<div style="top: 0px;">
				4. sit</div>
			<div style="top: 60px;">
				5. amet</div>
		</div>
		<p>
			(click the list to shuffle it around)
		</p>
	</div>
	</form>
</body>
</html>
